<template>
  <div>

    <el-table :data="list1" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="text" label="描述" width="180" />
      <el-table-column prop="name" label="城市">
        <template v-slot="scope">
          <span v-if="scope.row.modify">{{ scope.row.name }}</span>
          <el-input v-else v-model="scope.row.name" @change="cc(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="feels_like" label="体感温度" /> 
      <el-table-column prop="fh" label="湿度"> </el-table-column>
      
      

      <el-table-column prop="temp" label="温度">
        <template v-slot="scope">
          <span v-if="scope.row.modify">{{ scope.row.temp }}</span>
          <el-input v-else v-model="scope.row.temp" @change="cc(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="wind_dir" label="风向">
        <template v-slot="scope">
          <span v-if="scope.row.modify">{{ scope.row.wind_dir }}</span>
          <el-input v-else v-model="scope.row.wind_dir" @change="cc(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="wind_class" label="风力">
        <template v-slot="scope">
          <span v-if="scope.row.modify">{{ scope.row.wind_class }}</span>
          <el-input v-else v-model="scope.row.wind_class" @change="cc(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="update_time" label="更新时间">
        <template v-slot="scope">
          <span v-if="scope.row.modify">{{ scope.row.update_time }}</span>
          <el-input v-else v-model="scope.row.update_time" @change="cc(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>




      <el-table-column label="操作" >
          <template v-slot="scope">
            <el-button  v-if="scope.row.modify" @click="view(scope.$index, scope.row)">
              修改
            </el-button>
            <el-button  v-else @click="save(scope.$index, scope.row)">
              保存
            </el-button>
          </template>
        </el-table-column>


    </el-table>
  </div>
</template>

<script >
import storage from "./../utils/storage";
export default {

  name: 'Manage',

  data () {
    return {
      list1: [],
      data: [],
      bb: {},
    }
  },
  mounted () {
    this.getmanage_list()




  }, 
  watch: {
    //监听器的作用就是用来监听数据是否发生了变化，变化后可以进行一些其他操作
    //只要没有发生变化，就没有办法进行其他的操作
    bb: function (newData, oldData) {
      //newData是更新后的数据
      //oldData是旧数据
      // newData.tel = 1111;
      console.log("监听变化:", newData, oldData);
    },

  },
  methods: {

    view(index, row) {
      row.modify = false;
      this.data[index].modify = false;
      this.bb = this.data[index];
      this.data = JSON.parse(JSON.stringify(this.data));
      console.log("修改：", index, row, this.data[index].modify);
    },
    // 保存
    save(index, row) {
 
      
 
        // this.modify = true; //输入框是否为可输入状态
        this.data[index].modify = true;
        this.data = JSON.parse(JSON.stringify(this.data));
        print(this.data);
     
    },
    cc(index) {
      console.log("更改后的值：", this.data[index]);
      this.bb = this.data[index];
    },










     getmanage_list () {

      this.list1 = storage.getItem("manageList")
      console.log(this.list1)

    },

  }
}

</script>

<style lang="scss" scoped></style>